<template>
  <div class="hello">
    <p class="expertList"><img src="../assets/title10086.png" /></p>
    <ul class="Pinformation">
      <li v-for="(data,index) in  datas5">
        <div class="portrait">
         <!-- <img v-bind:src=myfilter(data.photo) />-->
           <img  v-if="data.photo ? show1:!show1" v-bind:src=data.photo />
           <img  v-else v-bind:src=bannerImgs />
        </div>
        <p class="zjname">{{data.spare3}}</p>
        <p class="education">学历：{{data.education}}</p>
        <p class="field">工作年限：{{data.dateWorke}}</p>
        <p class="field">专业领域：{{data.field}}</p>
        <button :dataIns=data.id @click='getDataId(data.id)'>预约TA</button>
      </li>
    </ul>
    <p class="moreZJ1"><router-link :to="{path:'/Expertdatabase'}" class="moreZJ2">查看更多专家</router-link></p>

  </div>
</template>

<script>

  export default {
    data () {
      return {
        bannerImgs:require('@/assets/wdl.png'),
        show1:true,
        datas5:[
        {
          'count':34,
          'dateWorke':27,
          'education':"硕士",
          'field':"经济专业",
          'follower':null,
          'id':4,
          'photo':require('@/assets/bg11.png'),
          'spare3':"杨国强",
          'title':"正高级工程师",

        },
        {
          'count':34,
          'dateWorke':27,
          'education':"硕士",
          'field':"经济专业",
          'follower':null,
          'id':2,
          'photo':require('@/assets/bg11.png'),
          'spare3':"杨国强",
          'title':"正高级工程师",

        },
        {
          'count':34,
          'dateWorke':27,
          'education':"硕士",
          'field':"经济专业",
          'follower':null,
          'id':2,
          'photo':require('@/assets/bg11.png'),
          'spare3':"杨国强",
          'title':"正高级工程师",

        },
        {
          'count':34,
          'dateWorke':27,
          'education':"硕士",
          'field':"经济专业",
          'follower':null,
          'id':2,
          'photo':require('@/assets/bg11.png'),
          'spare3':"杨国强",
          'title':"正高级工程师",

        },


      ],
      }
    },
    methods: {
      getDataId(id) {

        this.$router.push({path: '/ZJdetails', query:{stage: id}});
        console.log(id);
      },
      myfilter(value){
        return 'http://wut1.oss-cn-beijing.aliyuncs.com/'+ value.split(';')[0]

      },
      boajax(){
        let that=this
        $.ajax({
          type: "get",
          url: local+"/awm/experts/expertsFour",
          dataType: "json",
          beforeSend:function (xhr) {
            xhr. withCredentials=true
          },
          success: function(data){
            console.log(data)
            that.datas5=data.resultData
          },
          error:function(aa){
            console.log(aa)
          }
        });}
    },
    mounted () {
     this.boajax()
    }
  }
</script>

<style scoped>
  .hello {
    width: 100%;
    min-height: 36px;
    margin: 0 auto;
    background: #fff;
    padding-bottom:50px;
  }
.expertList{
  height:120px;
  background:#fff;
  text-align:center;
  /*margin:15px;*/
  line-height:130px;
  /*padding-left:20px;*/
  font-size:40px;

}
.expertList span{
    margin-bottom:-7px;
    margin-right:24px;
    display:inline-block;
    width: 9px;
    height: 40px;
    background: #ff8329;
}
.Pinformation{
    overflow: auto;
    zoom: 1;
    margin:10px 15px;
    background:#fff;
    padding-bottom:30px;
}
.Pinformation li{
  width:24%;
  float:left;
  height:380px;
  margin-left:9px;
  margin-top:9px;
  background:#fff;
  box-shadow: 0px 0px 2px 2px #e3e2e2;

}
.Pinformation .portrait{
  width:100%;
  height:95px;
  padding-top:10px;

}
.portrait img{
    height: 80px;
    width: 80px;
    border:1px solid #ededed;
    border-radius:50%;


}
.Pinformation .zjname{
  width:100%;
  height:45px;
  line-height:45px;

  font-size: 21px;
}
.Pinformation .education,.Pinformation .field{
  width:100%;
  height:35px;
  line-height:35px;
  text-align:center;
  font-size: 16px;
}
.Pinformation .field{
  width:192px;
  height:30px;
  line-height:30px;
  margin-bottom:13px;
  background:#edf4f7;
  margin-left:47px;
}
.Pinformation button{
  font-size: 16px;
  height:30px;
  line-height:30px;
  border:1px solid #ff8328;
  background:#ff8328;
  color:#fff;
  width:100px;
  margin-top:40px;
  border-radius:5px;

}
  .Pinformation button:hover{
    cursor: pointer;
  }
.moreZJ1 {
  height: 10px;
  border-bottom: 1px #666666 solid;
  text-align:center;
  margin-bottom:10px;
  margin:0 auto;
  width:96%;
 }
.moreZJ2{
  position: relative;
  display:inline-block;
  width:120px;
  background:#fff;
}
</style>


